.cellExtra {
  position: absolute;
  font-size: 10px;
  height: 75%;
  aspect-ratio: 1;
  z-index: 9;

  .extra {
    position: absolute;
    width: 50%;
    height: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color);
  }

  &.topRight {
    top: 0;
    right: 0;
    background-image: linear-gradient(
      to bottom left,
      transparent calc(50% - 1px),
      var(--color),
      transparent calc(50% + 1px)
    );

    .extra {
      top: 0;
      right: 0;
    }
  }

  &.bottomRight {
    bottom: 0 !important;
    right: 0;
    background-image: linear-gradient(
      to bottom right,
      transparent calc(50% - 1px),
      var(--color),
      transparent calc(50% + 1px)
    );

    .extra {
      bottom: 0;
      right: 0;
    }
  }

  &.bottomLeft {
    bottom: 0;
    left: 0;
    background-image: linear-gradient(
      to bottom left,
      transparent calc(50% - 1px),
      var(--color),
      transparent calc(50% + 1px)
    );

    .extra {
      bottom: 0;
      left: 0;
    }
  }

  &.topLeft {
    top: 0;
    left: 0;
    background-image: linear-gradient(
      to bottom right,
      transparent calc(50% - 1px),
      var(--color),
      transparent calc(50% + 1px)
    );

    .extra {
      top: 0;
      left: 0;
    }
  }
}
